昨天，我們知道為什麼會看到CORS的錯誤訊息，也知道從web server發出request透過瀏覽器會直接由api server接收，不過所有的request都是這樣嗎？所有request發到api server不給response這樣的機制不會有什麼問題嗎？讓我們今天探討一下web server發出的request吧！

簡單請求 (Simple request) & 預檢請求(Preflight request)

從web server端發起的request其實可以分為兩個種類，“簡單請求(Simple request)”和“預檢請求(Preflight request)"。判斷的方式也蠻簡單的，只要沒有符合以下的條件，就算Preflight Request

成為一個Simple request的條件：

1. metods符合 GET, POST, HEAD 之一
2. header設定不超出以下範圍：
   • Accept
   • Accept-Language
   • Content-Language
   • Content-type的值為三者之一
     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain

為什麼需要分Simple request & Preflight Request?

不知道大家還記不記得，昨天有提到，在遇到跨來源的請求瀏覽器會擋掉response，但其實request還是送給server了

聽起來很合理，反正我不要給response web端不就收不到資訊了嗎，那這樣會有什麼問題嗎？我們試著想一個情境，如果web這邊發出了一個request要刪除某個資料，API server收到request，雖然因為跨來源問題在web端收不到response，但request還是收到了，於是就把資料刪除了！！這樣是不是聽起來太不合理了... 於是就把Request分成兩種：simple request & preflight request

若所有request都會直接送到server，不該被執行的request也會被送到server執行(eg.刪除)，為了避免這樣的情況，我們需要有simple request & Preflight Request的區分

Simple request & Preflight Request 的差別

Simple request (簡單請求)
Simple Request 其實就是前面有提到的流程：
Web server發出request，API Server收到request，瀏覽器檢查是否來源相同或是有特定的http header，若不符合放行條件，則將response阻擋下來，並發出錯誤訊息通知；若符合條件，則把response傳會給前端web。

Preflight request (預檢請求)

Preflight request 是一個瀏覽器在送出真正的request前，會先送出的輕量request(使用OPTIONS方法)，只有header沒有body。header部分，它包含兩個部分的資訊：

1. HTTP methods (Access-Control-Request-Method)
   表示這個請求的方法，EX. POST, DELETE... 瀏覽器會自動處理
2. HTTP headers (Access-Control-Request-Headers)
   這個值放的會是這個請求額外自訂的header名稱，若有多個則用“,”區隔，瀏覽器會自動處理將所有不屬於simple request的header欄位都列出來。

送出後Preflight request給API Server後，API Server會回應一個Preflight response，此時便會判斷上述的兩個資訊：methods和headers。若資訊顯示通過，則會告訴瀏覽器是否可以繼續往下執行真正的request，並確認真正的request是否有權限可以將response放行回web server，否則便會給予CORS相關的錯誤訊息。

了解了request的分類後，明天我們就可以看一下瀏覽器怎麼發放放行通行證讓response回到web server囉～～